<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>简易NFT打怪游戏</title>
        <!-- 引入外部资源 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css"
        />
        <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
        <script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js"></script>
        <link rel="stylesheet" href="game.css" />
    </head>
    <body>
        <div id="app">
            <!-- 顶部导航 -->
            <header class="header">
                <h1>NFT打怪游戏</h1>
                <div class="wallet-section">
                    <el-button
                        type="primary"
                        @click="connectWallet"
                        v-if="!walletConnected"
                    >
                        连接钱包
                    </el-button>
                    <div v-else class="wallet-info">
                        <span>{{ shortAddress(walletAddress) }}</span>
                        <el-button
                            type="text"
                            size="mini"
                            @click="disconnectWallet"
                        >
                            断开
                        </el-button>
                        <el-badge :value="tokenBalance" class="token-badge">
                            MGT
                        </el-badge>
                    </div>
                </div>
            </header>

            <!-- 主要内容 -->
            <main class="container">
                <!-- 英雄区域 -->
                <section class="card hero-card">
                    <h2>我的英雄</h2>

                    <div v-if="!hero" class="create-hero">
                        <el-input
                            v-model="heroName"
                            placeholder="输入英雄名称"
                            maxlength="10"
                            class="hero-name-input"
                        ></el-input>
                        <el-button
                            type="success"
                            @click="createHero"
                            :disabled="!walletConnected || creatingHero"
                            class="create-btn"
                        >
                            <i class="el-icon-loading" v-if="creatingHero"></i>
                            创建英雄
                        </el-button>
                    </div>

                    <div v-else class="hero-info">
                        <div class="hero-avatar">
                            <el-avatar
                                :size="100"
                                icon="el-icon-user"
                            ></el-avatar>
                        </div>
                        <div class="hero-stats">
                            <h3>{{ hero.name }}</h3>
                            <p>战斗力: {{ hero.power }}</p>
                            <p>胜利次数: {{ hero.wins }}</p>
                        </div>
                    </div>
                </section>

                <!-- 怪物区域 -->
                <section class="card monsters-card" v-if="hero">
                    <h2>挑战怪物</h2>
                    <div class="monsters-grid">
                        <div
                            class="monster-item"
                            v-for="(monster, index) in monsters"
                            :key="index"
                        >
                            <div class="monster-avatar">
                                <el-avatar
                                    :size="60"
                                    :icon="getMonsterIcon(index)"
                                ></el-avatar>
                            </div>
                            <div class="monster-info">
                                <h4>{{ monster.name }}</h4>
                                <p>战斗力: {{ monster.power }}</p>
                                <p>奖励: {{ monster.reward }} MGT</p>
                            </div>
                            <el-button
                                type="warning"
                                @click="fightMonster(index)"
                                :disabled="fighting"
                                class="fight-btn"
                            >
                                <i class="el-icon-loading" v-if="fighting"></i>
                                挑战
                            </el-button>
                        </div>
                    </div>
                </section>
            </main>

            <!-- 战斗结果弹窗 -->
            <el-dialog
                title="战斗结果"
                :visible.sync="battleResultVisible"
                width="80%"
                :before-close="closeResult"
            >
                <div class="battle-result">
                    <div v-if="battleResult.won" class="result victory">
                        <i class="el-icon-success result-icon"></i>
                        <h3>胜利！</h3>
                        <p>你的英雄击败了 {{ battleResult.monsterName }}！</p>
                        <p>获得奖励: {{ battleResult.reward }} MGT</p>
                        <p>战斗力提升至: {{ battleResult.newPower }}</p>
                    </div>
                    <div v-else class="result defeat">
                        <i class="el-icon-error result-icon"></i>
                        <h3>失败</h3>
                        <p>你的英雄被 {{ battleResult.monsterName }} 击败了</p>
                        <p>战斗力降至: {{ battleResult.newPower }}</p>
                    </div>
                </div>
                <span slot="footer">
                    <el-button @click="closeResult">确定</el-button>
                </span>
            </el-dialog>
        </div>

        <script src="game.js"></script>
    </body>
</html>
